@textColor: rgba(255, 255, 255, 0.7);
@_blue: #4396f3;

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.m_disabled {
  cursor: not-allowed;
}

// 隐藏滚动条
.hd_bar::-webkit-bar {
  display: none;
  /* Chrome Safari 火狐不支持修改*/
}

.hd_scrollbar {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

span {
  display: inline-block;
}

img[src=''],
img:not([src]) {
  opacity: 0;
  border: 0;
}

button {
  border: none;
  cursor: pointer;
}
// button
._btn() {
  cursor: pointer;
  background: transparent;
  line-height: 1;
  color: #4696f3;
  border: 1px solid #4696f3;
}

.bt_df {
  ._btn();
  min-width: 0.5rem /* 40/80 */;
  height: 0.325rem /* 26/80 */;
  padding: 0 0.0625rem /* 5/80 */;
  border-radius: 4px;
}
.bt_round {
  ._btn();
  min-width: 0.5rem /* 40/80 */;
  height: 0.325rem /* 26/80 */;
  padding: 0 0.15rem /* 12/80 */;
  border-radius: 0.1625rem /* 13/80 */;
}

// 超出变省略号
// 单行的：
.LineBeyond {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行的：
.Multi-lineBeyond {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

i {
  font-style: normal;
}

// flex布局
.flex(@direction, @align, @justify, @wrap ) {
  display: flex;
  flex-direction: @direction;
  align-items: @align;
  justify-content: @justify;
  flex-wrap: @wrap;
}

.x_c {
  .flex(unset, center, center, unset);
}

.x_c() {
  .flex(unset, center, center, unset);
}

.y_c {
  .flex(column, center, center, unset);
}
.y_sa_rap {
  .flex(column, flex-start, space-around, unset);
}

// x轴可换行
.x_rap {
  .flex(unset, center, center, wrap);
}

.x_sa_rap {
  .flex(unset, center, space-around, wrap);
}
.x_sb_rap {
  .flex(unset, center, space-between, wrap);
}

.x_fs_rap {
  .flex(unset, center, flex-start, wrap);
}

// x左对齐
.x_left {
  .flex(unset, center, flex-start, wrap);
}

.x_left() {
  .flex(unset, center, flex-start, wrap);
}

// x右对齐
.x_right {
  .flex(unset, center, flex-end, unset);
}

// position
.tran_xy(@left,@top,@x,@y) {
  left: @left;
  top: @top;
  transform: translate(@x, @y);
  -webkit-transform: translate(@x, @y);
}
.p_x_c {
  position: absolute;
  .tran_xy(50%, unset, -50%, 0);
}
.p_x_c2 {
  position: relative;
  .tran_xy(50%, unset, -50%, 0);
}

// 图片
.ioc_img(@w, @h, @r) {
  width: @w;
  height: @h;
  border-radius: @r;
  // object-fit: contain;
}

// 背景渐变
.gradient_bg(@d, @from, @to) {
  // filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=@from,endColorStr=@to);
  // background: -webkit-gradient(
  //   linear,
  //   0% 0%,
  //   0% 100%,
  //   from(#ffffff),
  //   to(#fcf8f3)
  // );
  background: -moz-linear-gradient(@d, @from 0%, @to);
  background: -webkit-linear-gradient(@d, @from 0%, @to);
  background: -o-linear-gradient(@d, @from 0%, @to);
  background: -ms-linear-gradient(@d, @from 0%, @to);
}

.gradient_bg(@d, @from, @to) {
  background: linear-gradient(to @d, @from 0%, @to 100%);
}

.gradient(@d, @from, @to) when (@d =right) {
  .gradient_bg(left, @from, @to);
  .gradient_bg(@d, @from, @to);
}

.gradient(@d, @from, @to) when (@d =top) {
  .gradient_bg(bottom, @from, @to);
  .gradient_bg(@d, @from, @to);
}

.gradient(@d, @from, @to) when (@d =bottom) {
  .gradient_bg(top, @from, @to);
  .gradient_bg(@d, @from, @to);
}

.gradient(@d, @from, @to) when (@d =left) {
  .gradient_bg(right, @from, @to);
  .gradient_bg(@d, @from, @to);
}

// 数据统一
.datas_s(@fontSize: 20px) {
  color: #fff;
  font-size: @fontSize;
  font-family: 'BYfont';
  // letter-spacing: 2px;
}

// 文本统一
.text_s(@fontSize: 12px) {
  font-size: @fontSize;
  color: @textColor;
}

// 单选
.SpaceRadioGroup > .radioGroup {
  .el-radio__label {
    color: #fff;
    font-size: 14px;
  }

  .el-radio__inner {
    width: 16px;
    height: 16px;
    background: transparent;
  }

  .el-radio__inner::after {
    width: 8px;
    height: 8px;
    background: #4394f3;
  }

  .el-radio__input.is-checked .el-radio__inner {
    border-color: #4394f3;
  }
}

// 下拉
.el-dropdown__popper.el-popper[role='tooltip'] {
  border: none;
  background: rgba(30, 57, 87, 0.7) !important;
}

.el-dropdown-menu {
  background: transparent;
}

.el-dropdown-menu__item {
  color: @textColor;
}

.el-dropdown-menu__item {
  &:hover {
    color: @textColor;
    background: rgba(151, 200, 255, 0.5) !important;
  }
  &.is-checed {
    color: #fff;
    background: #4394f3;
  }
}

.el-popper__arrow {
  display: none;
}

// mni滚动条样式
.mniBar::-webkit-scrollbar {
  background: #233d59;
  width: 2px;
  height: 2px;
}

.mniBar::-webkit-scrollbar-thumb {
  background: #4696ef;
  width: 4px;
  height: 4px;
  border-radius: 2px;
}
// big滚动条样式
.bigBar {
  overflow-y: hidden;
}
.bigBar:hover {
  overflow-y: auto;
}
.bigBar::-webkit-scrollbar {
  width: 0.075rem /* 6/80 */;
  height: 0.075rem /* 6/80 */;
}

.bigBar::-webkit-scrollbar-thumb {
  background: rgba(70, 149, 239, 0.3);
  width: 0.075rem /* 6/80 */;
  height: 0.075rem /* 6/80 */;
  border-radius: 2px;
}

// 表单
.alarmAckForm {
  .el-textarea__inner {
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(67, 149, 243, 0.5);
    background: transparent;
    border-radius: 0;
  }
}

// 分页
.qx_pagination {
  text-align: right;
  padding: 0.25rem /* 20/80 */;
  .el-pager li,
  .btn-next,
  .btn-prev {
    color: #fff;
    background-color: transparent;
  }
  .el-pager {
    .active {
      color: #fff;
      background: #4396f3;
    }
  }

  button:disabled {
    background-color: transparent;
  }
  .el-pagination__total {
    color: @textColor;
  }
  .page_slot {
    text-align: center;
    font-weight: normal;
    color: @textColor;
    margin-right: 0.125rem /* 10/80 */;
  }
}

// color
.y_red {
  color: #e21c1c;
}
.y_yl {
  color: #ffc659;
}
.y_sblue {
  color: #00ffff;
}

.y_bd_red {
  border-color: #e21c1c;
  color: #e21c1c;
}
.y_bd_yl {
  border-color: #ffc659;
  color: #ffc659;
}
.y_bd_sblue {
  border-color: #00ffff;
  color: #00ffff;
}

// 弹框
.qDialog {
  .el-overlay {
    overflow: hidden;
    .el-dialog {
      top: -6vh;
      min-width: 3.75rem /* 300/80 */;
      min-height: 3.75rem /* 300/80 */;
      background: #0f1c2d;
      overflow: hidden;
      .el-dialog__header {
        padding: 0.25rem /* 20/80 */ 0.25rem /* 20/80 */ 0;
        .el-dialog__title {
          font-size: 0.3rem /* 24/80 */;
          color: #fff;
        }
        .el-dialog__headerbtn .el-dialog__close {
          color: rgba(255, 255, 255, 0.9);
        }
        i {
          font-size: 0.2875rem /* 23/80 */;
        }
      }

      .el-dialog__body {
        width: 100%;
        padding: 0.25rem /* 20/80 */;
      }

      .el-table__body-wrapper::-webkit-scrollbar,
      .el-dialog__body::-webkit-scrollbar {
        width: 0.075rem /* 6/80 */;
        height: 0.075rem /* 6/80 */;
      }

      .el-table__body-wrapper::-webkit-scrollbar-thumb,
      .el-dialog__body::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 0.0375rem /* 3/80 */;
      }

      .el-dialog_footer {
        font-size: 0.15rem /* 12/80 */;
        color: #fff;
      }
    }
  }
}
.mover_LEFT {
  // transition: all 1s;
  // transform: translateX(-100%);
  animation: marquee 1s ease-in-out;
  // animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

